<template>
  <div class="main">
    <!-- 按钮 -->
    <!-- <div class="header">
      <el-button class="header_btn">渠道客服看板</el-button>
    </div> -->
    <!-- 板块 -->
    <div class="nav">
      <!-- 1 -->
      <div class="nav_box">
        <div class="nav_box_top">
          <p class="nav_text">我的经纪人</p>
          <img
            src="../../assets/img/agent.png"
            class="nav_img"
            style="width:32px;height:30px"
          />
        </div>
        <div class="nav_box_bottom">
          <span class="nav_botText">{{ channelData.countChannel }}</span
          ><span class="nav_unitText">（人）</span>
        </div>
      </div>
      <!-- 2 -->
      <div class="nav_box">
        <div class="nav_box_top">
          <p class="nav_text">我的收入</p>
          <img
            src="../../assets/img/income.png"
            class="nav_img"
            style="width:24px;height:32px"
          />
        </div>
        <div class="nav_box_bottom">
          <span class="nav_botText">￥{{ channelData.personalIncome }}</span>
        </div>
      </div>
      <!-- 3 -->
      <div class="nav_box">
        <div class="nav_box_top">
          <p class="nav_text">经纪人订单</p>
          <img
            src="../../assets/img/order.png"
            class="nav_img"
            style="width:26px;height:30px"
          />
        </div>
        <div class="nav_box_bottom">
          <span class="nav_botText">{{ channelData.orderCount }}</span
          ><span class="nav_unitText">（个）</span>
        </div>
      </div>
      <!-- 4 -->
      <div class="nav_box">
        <div class="nav_box_top">
          <p class="nav_text">经纪人收入</p>
          <img
            src="../../assets/img/agentIncome.png"
            class="nav_img"
            style="width:24px;height:32px"
          />
        </div>
        <div class="nav_box_bottom">
          <span class="nav_botText">￥{{ channelData.countIncome }}</span>
        </div>
      </div>
      <!-- 5 -->
      <div class="nav_box">
        <div class="nav_box_top">
          <p class="nav_text">经纪人提成</p>
          <img
            src="../../assets/img/commission.png"
            class="nav_img"
            style="width:27px;height:29px"
          />
        </div>
        <div class="nav_box_bottom">
          <span class="nav_botText">￥{{ channelData.sellIncome }}</span>
        </div>
      </div>
      <!-- 6 -->
      <div class="nav_box">
        <div class="nav_box_top">
          <p class="nav_text">经纪人奖金</p>
          <img
            src="../../assets/img/bonus.png"
            class="nav_img"
            style="width:32px;height:32px"
          />
        </div>
        <div class="nav_box_bottom">
          <span class="nav_botText">￥{{ channelData.bonusIncome }}</span>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <!-- 经纪人明细  -->
      <div class="table_box" style="width:450px">
        <p class="table_P" style="border-left: 5px #FF7626 solid">经纪人明细</p>
        <el-table :data="agentDtat" stripe style="width: 100%" max-height="490">
          <el-table-column prop="name" label="经纪人" align="center" />
          <el-table-column prop="enrollTime" label="注册日期" align="center" />
          <el-table-column
            prop="accountStatus"
            label="当前状态"
            align="center"
          />
          <el-table-column prop="phoneNumber" label="联系电话" align="center" />
        </el-table>
        <!--    分页-->
        <div class="pagination page_wrap">
          <span class="title">小计：共{{ this.agentTotal }}条数据</span>
          <el-pagination
            background
            layout="prev, pager, next, sizes"
            :total="agentTotal"
            :page-size="agentQuery.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page.sync="agentCurrentPage"
            @current-change="handleCurrentChangeAgent"
            @size-change="handleSizeChangeAgent"
          ></el-pagination>
        </div>
      </div>
      <!-- 进件明细 -->
      <div class="table_box" style="width:540px">
        <p class="table_P" style="border-left: 5px #84D686 solid">进件明细</p>
        <el-table :data="inputData" stripe style="width: 100%" max-height="490">
          <el-table-column prop="agentName" label="经纪人" align="center" />
          <el-table-column prop="productName" label="产品类型" align="center" />
          <el-table-column
            prop="basicLoansMoney"
            label="申请金额"
            align="center"
          />
          <el-table-column
            prop="inputTime"
            label="放款时间"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!--    分页-->
        <div class="pagination page_wrap">
          <span class="title">小计：共{{ this.inputTotal }}条数据</span>
          <el-pagination
            background
            layout="prev, pager, next, sizes"
            :total="agentTotal"
            :page-size="inputQuery.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page.sync="inputCurrentPage"
            @current-change="handleCurrentChangeInput"
            @size-change="handleSizeChangeInput"
          ></el-pagination>
        </div>
      </div>
      <!-- 提成明细 -->
      <div class="table_box" style="width:640px">
        <p class="table_P" style="border-left: 5px #FEB404 solid">提成明细</p>
        <el-table :data="loanData" stripe style="width: 100%" max-height="490">
          <el-table-column prop="agentName" label="经纪人" align="center" />
          <el-table-column
            prop=" productName"
            label="产品类型"
            align="center"
          />
          <el-table-column prop="loanMoney" label="放款金额" align="center" />
          <el-table-column prop="sellMoney" label="提成金额" align="center" />
          <el-table-column
            prop="loanTime"
            label="放款时间"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination page_wrap">
          <span class="title">小计：共{{ this.loanTotal }}条数据</span>
          <el-pagination
            background
            layout="prev, pager, next, sizes"
            :total="loanTotal"
            :page-size="loanQuery.pagesize"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page.sync="loanCurrentPage"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiChannelData,
  apiAgentDetails,
  apiInputDetails,
  apiLoanOrder
} from "../../../src/assets/js/api";
export default {
  name: "channel",
  data() {
    return {
      channelData: {
        bonusIncome: 0,
        countChannel: 0,
        countIncome: 0,
        orderCount: 0,
        personalIncome: 0,
        sellIncome: 0
      },
      // 经纪人明细
      agentDtat: [],
      agentQuery: {
        pageNo: 1,
        pageSize: 10
      },
      agentTotal: 10,
      agentCurrentPage: 1,
      agentPages: 0,
      // 进件明细
      inputData: [],
      inputQuery: {
        pageNo: 1,
        pageSize: 10
      },
      inputTotal: 10,
      inputCurrentPage: 1,
      inputPages: 0,
      // 提成明细
      loanData: [],
      loanQuery: {
        pageNo: 1,
        pageSize: 10
      },
      loanTotal: 10,
      loanCurrentPage: 1,
      loanPages: 0
    };
  },
  created() {
    this.gitList();
    this.apiAgent();
    this.apiInput();
    this.apiLoan();
  },

  methods: {
    // 看板数据
    gitList() {
      apiChannelData().then(res => {
        if (res.code == 200) {
          this.channelData = res.data;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    // 经纪人明细
    apiAgent() {
      apiAgentDetails(this.agentQuery).then(res => {
        if (res.code == 200) {
          this.agentQuery.pageSize = res.data.size;
          this.agentQuery.pageNo = res.data.current;
          this.agentTotal = res.data.total;
          this.agentPages = res.data.pages;
          this.agentDtat = res.data.records;
        }
      });
    },
    // 进件明细
    apiInput() {
      apiInputDetails(this.inputQuery).then(res => {
        if (res.code == 200) {
          this.inputQuery.pageSize = res.data.size;
          this.inputQuery.pageNo = res.data.current;
          this.inputTotal = res.data.total;
          this.inputPages = res.data.pages;
          this.inputData = res.data.records;
        }
      });
    },
    // 经纪人提成
    apiLoan() {
      apiLoanOrder(this.loanQuery).then(res => {
        if (res.code == 200) {
          this.loanQuery.pageSize = res.data.size;
          this.loanQuery.pageNo = res.data.current;
          this.loanTotal = res.data.total;
          this.loanPages = res.data.pages;
          this.loanData = res.data.records;
        }
      });
    },
    // 查看跳转页面
    handleClick() {
      this.$message({
        message: "暂未开通",
        type: "warning"
      });
    },
    //经纪人明细分页
    handleCurrentChangeAgent(cpage) {
      this.agentQuery.pageNo = cpage;
      this.apiAgent(this.agentQuery);
    },
    handleSizeChangeAgent(psize) {
      this.agentQuery.pageSize = psize;
      this.apiAgent(this.agentQuery);
    },
    // 进件明细
    handleCurrentChangeInput(cpage) {
      this.inputQuery.pageNo = cpage;
      this.apiInput(this.inputQuery);
    },
    handleSizeChangeInput(psize) {
      this.inputQuery.pageSize = psize;
      this.apiInput(this.inputQuery);
    },
    // 提成明细
    handleCurrentChange(cpage) {
      this.loanQuery.pageNo = cpage;
      this.apiLoan(this.loanQuery);
    },
    handleSizeChange(psize) {
      this.loanQuery.pageSize = psize;
      this.apiLoan(this.loanQuery);
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  width: calc(100% -40px);
  height: calc(100vh - 152px);
  display: flex;
  flex-direction: column;
  padding: 0 20px 0 20px;
}
.header {
  width: 100%;
  height: 32px;
  text-align: left;
}
.header_btn {
  height: 32px;
  line-height: 0;
}
.nav {
  width: 100%;
  height: 160px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
}
.nav_box {
  height: 100px;
  width: 260px;
  min-width: 200px;
  margin-right: 22px;
  background: #ffffff;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.nav_box:last-child {
  margin-right: 0;
}
.table {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
}
.nav_box_top {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.nav_text {
  float: left;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.nav_img {
  float: right;
}
.nav_box_bottom {
  margin-top: 27px;
  text-align: left;
}
.nav_botText {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.nav_unitText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.table_box {
  flex: 1;
  margin-right: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
}
.table_box:last-child {
  margin-right: 0;
}
::v-deep .el-table th > .cell {
  color: #333333;
  font-size: 14px;
  font-weight: bold;
}
::v-deep .el-table td,
.el-table th {
  padding: 10px 0;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5faff;
}
// ::v-deep .el-table td,
// .building-top .el-table th.is-leaf {
//   border-bottom: none;
// }
::v-deep .el-pagination {
  float: right;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.pagination {
  height: auto;
  width: 100%;
  margin-top: 20px;
}
.title {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  float: left;
}
.table_P {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  text-align: left;
  padding-left: 10px;
  height: 17px;
  line-height: 17px;
  margin-bottom: 5px;
}

// 滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>
